<template>
    <el-row style="height:100%">
        <el-col :span="6">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>角色管理</span>
                    </div>
                </template>
                <el-row :gutter="2">
                    <el-button @click="addRoleDialogVisible=true">新增</el-button>
                    <el-button @click="delRoleDialogVisible=true">删除</el-button>
                    <el-dialog v-model="addRoleDialogVisible" title="新增" width="30%" destroy-on-close center>
                        <el-form :model="role_item">
                            <el-form-item label="角色">
                                <el-input v-model="role_item.name" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="add_role">确定</el-button>
                                <el-button type="primary" @click="addRoleDialogVisible=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <el-dialog v-model="delRoleDialogVisible" title="新增" width="30%" destroy-on-close center>
                        <el-form :model="role_item">
                            <el-form-item>
                                <span>确认删除选中行数据？</span>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="add_role">确定</el-button>
                                <el-button type="primary" @click="delRoleDialogVisible=false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-row>
                <el-row>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="name" />
                    </el-table>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="18" style="height:100%">
            <el-row :span="8">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>数据权限设置</span>
                        </div>
                    </template>
                    <el-row>
                        <span style="margin:auto 0">数据范围：</span>
                        <el-select>
                            <el-option v-for="i in select_data" :key="i" :value="i"></el-option>
                        </el-select>
                    </el-row>
                </el-card>
            </el-row>
            <el-row :span="16">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>数据权限设置</span>
                        </div>
                    </template>
                    <el-row>
                        <el-tree
                            :data='treeData'
                            show-checkbox
                            default-expand-all/>
                    </el-row>
                </el-card>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import {ref} from 'vue'
export default {
    setup(){
        let tableData=ref([
            {
                name: '管理员',
            },
        ]),treeData=ref([
                {
                    label: '一级模块目录名称',
                    children: [
                        {
                            label: '二级模块目录名称',
                            children: [
                                {
                                    label: '新增',
                                },
                                {
                                    label: '删除',
                                },
                                {
                                    label: '保存',
                                },
                            ],
                        },
                    ],
                }
            ])
        function update_role_data(){
            window.cefQueryRequset('role','query', {}, (res,data)=>{
                if(res && data instanceof Array && data.length) {
                    tableData.value = tableData.value.concat(data)
                }
            })
        }
        update_role_data()
        return {tableData,treeData,update_role_data}
    },
    data(){
        
        return {
            select_data:[
                "20",
                "21"
            ],
            addRoleDialogVisible:ref(false),
            delRoleDialogVisible:ref(false),
            role_item:{
                name:''
            }
        }
    },
    methods:{
        add_role(){
            window.cefQueryRequset('role','add',this.role_item)
            this.update_role_data()
            this.addRoleDialogVisible =false;
        },
        del_role(){
            
            window.cefQueryRequset('role','del',this.role_item)
            this.delRoleDialogVisible = false;
        }
    }
}
</script>

<style scoped>
.el-card{
    width:100%;
    height:100%;
}
</style>